//地图
import React, { Component } from 'react';

//加载模块样式
import { mapownStyle as styles } from '../../../styles';
import { mapcarStyle as carStyle } from '../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
import { MapView, MapModule, RouteModule } from 'rn-ai-baidu-map';
import {
    View,
    Text,
    TouchableOpacity,
    PanResponder
} from 'react-native';

var Dimensions = require('Dimensions');
import { myAlert } from '../../util/compatible';
var width = Dimensions.get('window').width;          //获取屏幕宽度
var height = Dimensions.get('window').height;
import Mapcar from './car';
import Mapbus from './businlist';
import Mapgo from './go';
import Mapbicycle from './bicycle';


const mWidth = -[height - 80 - (height * 0.25)]
export default class Map_own extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bottom: mWidth,
            isTB: "bottom",
            mapIsOk : false,
            Lines: [],
            routeType:'jc',
            theLine: 0
        }
        this.s = "none"
    }

    componentWillMount(evt, gestureState) {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                //开始移动
                this.s = "none"
            },
            onPanResponderMove: (evt, gestureState) => {
                let theTB = mWidth
                if (this.state.isTB == "top") {
                    theTB = 0
                }
                let temp = theTB - gestureState.dy
                if (gestureState.dy >= 70) {
                    this.s = "down"
                } else if (gestureState.dy <= -70) {
                    this.s = "up"
                } else {
                    this.s = "none"
                }
                if (temp <= mWidth) temp = mWidth//不能超过最低
                if (temp >= 0) temp = 0//不能高过最高
                this.setState({
                    bottom: temp,
                    mapIsOk : false
                })
            },
            onPanResponderRelease: (evt, gestureState) => {
                //停止移动
                if (this.s == "up") {
                    this.setState({
                        bottom: 0,
                        isTB: "top",
                        mapIsOk : false
                    })
                } else if (this.s == "down") {
                    this.setState({
                        bottom: mWidth,
                        isTB: "bottom",
                        mapIsOk : false
                    })
                }
            },
            onPanResponderTerminate: (evt, gestureState) => {
                //console.log("2")
            },
        });
    }

    init() {
        const {params} = this.props.navigation.state;
        MapModule.toPosition(41.766136,123.444253).then(
            e => {
                if (params) {
                    const latLng = params
                    MapModule.setMark(latLng.latitude, latLng.longitude).then(
                        e2 => {
                            this._setType("hct")
                        }
                    )
                }
            }
        );

    }

    componentDidUpdate(){
        if(this.state.mapIsOk){
            RouteModule.toNavigation(this.state.routeType, this.state.theLine);
        }
    }

    _setType(type){
        if(this.state.Lines&&this.state.Lines[0]){
            if((type=="bx"||type=="qx")&&this.state.Lines[0].distance>10000){
                if(type=="bx"){
                    myAlert("路程太远不推荐步行")
                }
                if(type=="qx"){
                    myAlert("路程太远不推荐骑行")
                }
                return;
            }
            // if(type=="jc"&&this.state.Lines[0].distance>500000){
            //     myAlert("路程太远不推荐驾车")
            //     return;
            // }
        }

        RouteModule.toNavigationSel(type).then(
            res => {
                if (res.state == "ok") {
                    this.setState(
                        { 
                            Lines: res.Lines, 
                            routeType: type,
                            mapIsOk:true
                        }
                    )
                } else {
                    this.setState(
                        { 
                            mapIsOk:false
                        }
                    )
                    myAlert("定位失败")
                }
            }
        );
    }
    


    render() {
        return (
            <View style={[styles.map_all, { width: width * 1 }]}>
                <View style={[styles.maptop, { height: height * 0.07,
                elevation: 5,
                shadowColor: 'black',
                shadowOpacity: 1,
                shadowRadius: 5  }]}>

                    <TouchableOpacity activeOpacity={1}
                        onPress={() => { this._setType("jc")}}
                        style={[styles.everym, { width: width * 0.25, height: height * 0.07 }]}>
                        {this.state.routeType == 'jc' ?
                            <Text style={styles.onfocus}></Text>
                            : <Text style={styles.unfocus}>驾车</Text>}
                        {this.state.routeType == 'jc' ? <Icon
                            name={'md-car'}
                            size={20}
                            color={'#ffffff'} style={styles.carperson} />
                            : null}
                    </TouchableOpacity>

                    <TouchableOpacity activeOpacity={1}
                        onPress={() => { this._setType("hct") }}
                        style={[styles.everym, { width: width * 0.25, height: height * 0.07 }]}>
                        {this.state.routeType == 'hct' ? <Text style={styles.onfocus}></Text>
                            : <Text style={styles.unfocus}>公交</Text>}
                        {this.state.routeType == 'hct' ? <Icon
                            name={'md-bus'}
                            size={20}
                            color={'#ffffff'} style={styles.carperson} /> : null}
                    </TouchableOpacity>

                    <TouchableOpacity activeOpacity={1}
                        onPress={() => { this._setType("bx") }}
                        style={[styles.everym, { width: width * 0.25, height: height * 0.07 }]}>
                        {this.state.routeType == 'bx' ? <Text style={styles.onfocus}></Text>
                            : <Text style={styles.unfocus}>步行</Text>}
                        {this.state.routeType == 'bx' ? <Icon
                            name={'md-walk'}
                            size={20}
                            color={'#ffffff'} style={styles.carperson} /> : null}
                    </TouchableOpacity>

                    <TouchableOpacity activeOpacity={1}
                        onPress={() => { this._setType("qx") }}
                        style={[styles.everym, { width: width * 0.25, height: height * 0.07 }]}>
                        {this.state.routeType == 'qx' ? <Text style={styles.onfocus}></Text>
                            : <Text style={styles.unfocus}>骑行</Text>}
                        {this.state.routeType == 'qx' ? <Icon
                            name={'md-bicycle'}
                            size={20}
                            color={'#ffffff'} /> : null}
                    </TouchableOpacity>


                </View>

                
                <View style={carStyle.carall}>
                    <View style={{ height: height * 0.65 }}>
                        <MapView
                            zoom={14}
                            style={{ height: height * 0.65 }}
                            onMapLoad={(e)=>{
                                if(e.state=="ok"){
                                    this.init()
                                }
                            }}
                        />
                    </View>

                    <View style={[carStyle.carboo, {
                        height: height - 80,
                        width: width * 1,
                        bottom: this.state.bottom
                    }]}>

                        {/* 小按钮 */}
                        <View style={carStyle.carlittle}
                            {...this._panResponder.panHandlers}>
                            <Icon
                                name={'md-funnel'}
                                size={25}
                                color={'#aeaeae'} style={carStyle.businicon2} />
                        </View>

                        {this.state.routeType == 'jc' ?
                            <Mapcar Lines={this.state.Lines}/> :
                            this.state.routeType == 'hct' ?
                                <Mapbus Lines={this.state.Lines} navigation={this.props.navigation}/> :
                                this.state.routeType == 'bx' ?
                                    <Mapgo Lines={this.state.Lines}/> :
                                    this.state.routeType == 'qx' ?
                                        <Mapbicycle Lines={this.state.Lines}/> : null
                        }
                    </View>
                </View>
            </View>
            
        )
    }
}